<template>
  <!-- 页面-菜单管理-添加 -->
  <div class="sidelip-box service-form">
    <Form ref="serviceForm" class="ivu-form-no-margin-bottom" :label-width="70" :model="modelForm">
      <Row :gutter="32" class="code-row-bg">
        <Col span="10" style="border: none">
          <Form-item prop="api" :label="$t('module.serviceManage.paramconfigapi')" :label-width="140">
            <Input
              :placeholder="$t('common.pleaseInput') + $t('module.serviceManage.paramconfigapi')"
              
              v-model="modelForm.api"
              style="width: 100%"
            ></Input>
          </Form-item>
        </Col>
        <Col span="10" style="border: none">
          <Form-item prop="method" :label="$t('module.serviceManage.getmethod')" :label-width="140">
            <Select
              transfer
              v-model="modelForm.method"
              
              :placeholder="$t('common.pleaseSelect') + $t('module.serviceManage.getmethod')"
            >
              <Option :value="item.vsiKey" :key="index" v-for="(item, index) in valueSet.gateway_receive_type">{{
                item.vsiValue
              }}</Option>
            </Select>
          </Form-item>
        </Col>
      </Row>
      <Row :gutter="32" class="code-row-bg">
        <Col span="8" style="border: none"> Header </Col>
      </Row>
      <Row :gutter="32" class="code-row-bg" v-for="(item, index) in modelForm.headerList" :key="'header' + index">
        <Col span="2" style="border: none">
          <div class="operate">
            <Icon
              type="ios-add-circle-outline"
              @click="handleAdd('header')"
              v-if="index + 1 === modelForm.headerList.length"
            />
            <Icon
              type="ios-remove-circle-outline"
              @click="handleReduce('header', index)"
              v-if="index + 1 === modelForm.headerList.length"
            />
          </div>
        </Col>
        <Col span="7" style="border: none">
          <Form-item prop="name" :label="$t('module.serviceManage.paramname')">
            <Input
              :placeholder="$t('common.pleaseInput') + $t('module.serviceManage.paramname')"
              
              v-model="item.name"
              style="width: 100%"
            ></Input>
          </Form-item>
        </Col>
        <Col span="7" style="border: none">
          <Form-item prop="name" :label="$t('module.serviceManage.valuetype')">
            <Select
              transfer
              v-model="item.type"
              
              :placeholder="$t('common.pleaseSelect') + $t('module.serviceManage.valuetype')"
            >
              <Option :value="item.vsiKey" :key="index" v-for="(item, index) in valueSet.gateway_receive_type">{{
                item.vsiValue
              }}</Option>
            </Select>
          </Form-item>
        </Col>
        <Col span="7" style="border: none">
          <Form-item prop="value" :label="$t('module.serviceManage.value')">
            <Input
              :placeholder="$t('common.pleaseInput') + $t('module.serviceManage.value')"
              
              v-model="item.value"
            ></Input>
          </Form-item>
        </Col>
      </Row>

      <Row :gutter="32" class="code-row-bg">
        <Col span="8" style="border: none"> Body </Col>
      </Row>
      <Row :gutter="32" class="code-row-bg" v-for="(item, index) in modelForm.bodyList" :key="'body' + index">
        <Col span="2" style="border: none">
          <div class="operate">
            <Icon
              type="ios-add-circle-outline"
              @click="handleAdd('body')"
              v-if="index + 1 === modelForm.bodyList.length"
            />
            <Icon
              type="ios-remove-circle-outline"
              @click="handleReduce('body', index)"
              v-if="index + 1 === modelForm.bodyList.length"
            />
          </div>
        </Col>
        <Col span="7" style="border: none">
          <Form-item prop="name" :label="$t('module.serviceManage.paramname')">
            <Input
              :placeholder="$t('common.pleaseInput') + $t('module.serviceManage.paramname')"
              
              v-model="item.name"
              style="width: 100%"
            ></Input>
          </Form-item>
        </Col>
        <Col span="7" style="border: none">
          <Form-item prop="name" :label="$t('module.serviceManage.valuetype')">
            <Select
              transfer
              v-model="item.type"
              
              :placeholder="$t('common.pleaseSelect') + $t('module.serviceManage.valuetype')"
            >
              <Option :value="item.vsiKey" :key="index" v-for="(item, index) in valueSet.gateway_receive_type">{{
                item.vsiValue
              }}</Option>
            </Select>
          </Form-item>
        </Col>
        <Col span="7" style="border: none">
          <Form-item prop="value" :label="$t('module.serviceManage.value')">
            <Input
              :placeholder="$t('common.pleaseInput') + $t('module.serviceManage.value')"
              
              v-model="item.value"
            ></Input>
          </Form-item>
        </Col>
      </Row>

      <Row :gutter="32" class="code-row-bg">
        <Col span="8" style="border: none"> Url </Col>
      </Row>
      <Row :gutter="32" class="code-row-bg" v-for="(item, index) in modelForm.urlList" :key="'url' + index">
        <Col span="2" style="border: none">
          <div class="operate">
            <Icon
              type="ios-add-circle-outline"
              @click="handleAdd('url')"
              v-if="index + 1 === modelForm.urlList.length"
            />
            <Icon
              type="ios-remove-circle-outline"
              @click="handleReduce('url', index)"
              v-if="index + 1 === modelForm.urlList.length"
            />
          </div>
        </Col>
        <Col span="7" style="border: none">
          <Form-item prop="name" :label="$t('module.serviceManage.paramname')">
            <Input
              :placeholder="$t('common.pleaseInput') + $t('module.serviceManage.paramname')"
              
              v-model="item.name"
              style="width: 100%"
            ></Input>
          </Form-item>
        </Col>
        <Col span="7" style="border: none">
          <Form-item prop="name" :label="$t('module.serviceManage.valuetype')">
            <Select
              transfer
              v-model="item.type"
              
              :placeholder="$t('common.pleaseSelect') + $t('module.serviceManage.valuetype')"
            >
              <Option :value="item.vsiKey" :key="index" v-for="(item, index) in valueSet.gateway_receive_type">{{
                item.vsiValue
              }}</Option>
            </Select>
          </Form-item>
        </Col>
        <Col span="7" style="border: none">
          <Form-item prop="value" :label="$t('module.serviceManage.value')">
            <Input
              :placeholder="$t('common.pleaseInput') + $t('module.serviceManage.value')"
              
              v-model="item.value"
            ></Input>
          </Form-item>
        </Col>
      </Row>
    </Form>
  </div>
</template>
<script>
import menuAPI from "@/api/menuAPI.js";
import locales from "./locales.js";
import { codeReg } from "@/const.js";
import configKey from "./configKey.vue";

// 一天的毫秒数
const ONE_DAY = 86400000;
export default {
  name: "menu-edit",
  mixins: [locales],
  components: {},
  props: {
    valueSet: {},
    tenantCode: {
      type: String,
      default() {
        return "";
      }
    },
    rowList: {
      type: Object,
      default() {
        return {};
      }
    }
  },
  data() {
    return {
      modelForm: {
        api: "",
        method: "",
        headerList: [{ name: "", type: "", value: "" }],
        bodyList: [{ name: "", type: "", value: "" }],
        urlList: [{ name: "", type: "", value: "" }]
      },
      actions: [
        {
          text: "保存",
          theme: "warning",
          loading: false,
          handle: () => {
            this.save();
          }
        },
        {
          text: "取消",
          theme: "warning",
          handle: () => {
            this.$emit("Close");
          }
        }
      ]
    };
  },
  computed: {},
  created() {
    this.setPageButton();
    this.$emit("SetPageWidth", 900);
    this.$emit("SetTitle", this.$t("module.serviceManage.getparamconfig"));
  },
  mounted() {},
  methods: {
    setPageButton() {
      this.$emit("SetPageActions", this.actions);
    },
    paramConfig() {
      new this.$pageModal(
        configKey,
        {
          props: {}
        },
        data => {
          data && this.search(this.$refs.serviceTable.param.pageNum);
        }
      );
    },
    handleAdd(param) {
      if (param === "header") {
        this.modelForm.headerList.push({ name: "", method: "", type: "", value: "" });
      } else if (param === "body") {
        this.modelForm.bodyList.push({ name: "", method: "", type: "", value: "" });
      } else if (param === "url") {
        this.modelForm.urlList.push({ name: "", method: "", type: "", value: "" });
      }
    },
    handleReduce(param, index) {
      if (param === "header" && this.modelForm.headerList.length > 1) {
        this.modelForm.headerList.splice(index, 1);
      } else if (param === "body" && this.modelForm.bodyList.length > 1) {
        this.modelForm.bodyList.splice(index, 1);
      } else if (param === "url" && this.modelForm.urlList.length > 1) {
        this.modelForm.urlList.splice(index, 1);
      }
    },
    save() {
      // this.$refs["serviceForm"].validate(valid => {
      //   if (valid) {
      //     this.actions[0].loading = true;
      //     if (this.modelForm.id) {
      //       let param = this.modelForm;
      //       menuAPI
      //         .updateMenu(param)
      //         .then(response => {
      //           this.actions[0].loading = false;
      //           this.$message.success({
      //             content: this.$t("module.serviceManage.warning.updateSuccessfully"),
      //             duration: 3
      //           });
      //           this.$emit("Close", true);
      //         })
      //         .catch(data => {
      //           this.actions[0].loading = false;
      //         });
      //     } else {
      //       let param = this.modelForm;
      //       menuAPI
      //         .addMenu(param)
      //         .then(response => {
      //           this.actions[0].loading = false;
      //           this.$message.success({
      //             content: this.$t("module.serviceManage.warning.createMenuSuccessfully"),
      //             duration: 3
      //           });
      //           this.$emit("Close", true);
      //         })
      //         .catch(data => {
      //           this.actions[0].loading = false;
      //         });
      //     }
      //   }
      // });
    }
  }
};
</script>
<style lang="less">
.service-form {
  .operate {
    height: 34px;
    width: 60px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    i {
      font-size: 24px;
      color: #ff6f4b;
      cursor: pointer;
    }
  }
  .ivu-btn-warning {
    padding: 4px 23px;
    background-color: #ff6f4b;
    border-color: #ff6f4b;
    border-radius: 0;
  }
  .ivu-btn-warning:hover {
    padding: 4px 23px;
    background-color: #ff6f4b;
    border-color: #ff6f4b;
    border-radius: 0;
  }
}
.custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;
  padding-right: 8px;
}
.ivu-form .ivu-form-item-label {
  padding: 10px 9px 10px 0 !important;
}
</style>
